<template>
  <!-- 面包屑导航栏 -->
  <div :class="{ 'hu-bread-nav': true, 'hu-bread-nav-border': border }">
    <div v-for="(item, index) in nav" :key="item[props.id]">
      <van-icon v-if="index != 0" name="arrow" />
      <span style="cursor: pointer" @click="onTitle(item, index)">
        {{
        item[props.text]
        }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HuBreadNav",
  props: {
    // 面包屑导航栏
    /**
     * {
     *  text:'',
     *  id:''
     * }
     */
    nav: {
      type: Array,
      default: () => {}
    },
    // 是否存在底边框
    border: {
      type: Boolean,
      default: true
    },
    props: {
      type: Object,
      default: () => {
        return {
          text: "text",
          id: "id"
        };
      }
    }
  },
  methods: {
    onTitle(item, index) {
      let nav = this.nav || [];
      nav = nav.splice(0, index + 1);
      this.$emit("update:nav", nav);
      this.$emit("onNav", index, item[this.props.id], item);
    }
  }
};
</script>

<style lang="scss" scoped>
.hu-bread-nav {
  display: flex;
  padding: 10px 20px;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.hu-bread-nav-border {
  border: 1px solid #ebedf0;
}
</style>
